<template>
  <div class="home">
    <el-carousel :height="$store.state.screenWidth ? '170px' : '800px'">
      <el-carousel-item
        class="carousel-item"
        v-for="item in img"
        :key="item.id"
      >
        <img :src="item.url" alt="" style="magin" />
      </el-carousel-item>
    </el-carousel>
    <div class="content">
      <div class="content-titl">
        <h3>优质甄选 时尚添彩生活</h3>
        <span>我们的每一款商品都是经过严格质量把控，舒适 亲肤</span>
      </div>
      <div class="content-show">
        <div class="goodsbox">
          <img
            src="http://text.66666666.ink/goodsbox/t1.png"
            alt=""
            onclick="return false"
          />
          <p>健康美容</p>
          <span>轻松育儿 品质生活</span>
        </div>
        <div class="goodsbox">
          <img
            src="http://text.66666666.ink/goodsbox/t2.png"
            alt=""
            onclick="return false"
          />
          <p>流行饰品</p>
          <span>轻松育儿 品质生活</span>
        </div>
        <div class="goodsbox">
          <img
            src="http://text.66666666.ink/goodsbox/t3.png"
            alt=""
            onclick="return false"
          />
          <p>创意家居</p>
          <span>轻松育儿 品质生活</span>
        </div>
        <div class="goodsbox">
          <img
            src="http://text.66666666.ink/goodsbox/t4.png"
            alt=""
            onclick="return false"
          />
          <p>流行包饰</p>
          <span>轻松育儿 品质生活</span>
        </div>
      </div>
    </div>
    <!-- <div class="column" v-if="$store.state.screenWidth">
      <div class="column-konw">育儿知识</div>
      <div class="column-content">
        <div class="column-list" v-for="item in 2" :key="item">
          <div class="column-img">
            <img src="http://test.exgt.xyz/bishe/byd.png" alt="" />
          </div>
          <div class="column-title">
            <p class="p1">
              7款知名婴儿米粉检出重金属，还能吃吗？真相没那么简单
            </p>
            <p class="p2">
              近日，一则“美国多款知名品牌婴儿食品涉嫌重金属超标”的消息引起热议，涉事品牌包括雀巢嘉宝、Nurture、海恩时富等，在国内也有售卖，引发消费者对婴幼儿辅食产品安全问题的担忧。
            </p>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import bartop from "@/components/general/bartop.vue";
export default {
  components: {
    bartop,
  },
  data() {
    return {
      flagWidth: this.$store.getters.screenWidth,
      img: [
        // 在url后边加上require（"这里是图片路径"）
        { id: "1", url: "http://text.66666666.ink/scroller/banner.jpg" },
        { id: "2", url: "http://text.66666666.ink/scroller/homebak2.png" },
        // { id: "2", url: require("@/assets/general/homebak2.png") },
      ],
    };
  },
  mounted() {
    if (document.body.clientWidth <= 1000) {
      this.$store.commit("change", true);
    } else {
      this.$store.commit("change", false);
    }
    //this.getscroller();
  },
  methods: {
    async getscroller() {
      const res = await this.$myRequest.post("getscroller");
      this.img = res.data.data;
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  width: 100%;
}

.content {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .content-titl {
    width: 94%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h3 {
      font-size: 12px;
    }
    span {
      margin-top: 10px;
      text-align: center;
      font-size: 8px;
      color: #9a9a9a;
    }
  }
  .content-show {
    width: 50%;
    //height: ;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .goodsbox {
      width: 49%;
      height: 180px;
      margin-bottom: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 100%;
        height: 80%;
      }
      p {
        margin-top: 10px;
        font-size: 10px;
      }
      span {
        margin-top: 5px;
        font-size: 8px;
        color: #9a9a9a;
      }
    }
  }
}

@media screen and (max-width: 750px) {
  img {
    width: 100%;
    height: 400px;
  }

  .content {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .content-titl {
      width: 94%;
      height: 300px;
      //margin-top: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      h3 {
        font-size: 40px;
      }
      span {
        margin-top: 10px;
        text-align: center;
        font-size: 32px;
        color: #9a9a9a;
      }
    }
    .content-show {
      width: 94%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .goodsbox {
        width: 49%;
        height: 350px;
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 100%;
          height: 70%;
        }
        p {
          margin-top: 10px;
          font-size: 32px;
        }
        span {
          margin-top: 10px;
          font-size: 28px;
          color: #9a9a9a;
        }
      }
    }
  }
  // .column {
  //   margin-top: 10px;
  //   width: 100%;
  //   background: #fff;
  //   box-sizing: border-box;
  //   display: flex;
  //   flex-direction: column;
  //   .column-konw {
  //     width: 100%;
  //     height: 70px;
  //     line-height: 70px;
  //     padding-left: 20px;
  //     font-size: 40px;
  //     font-weight: 900;
  //     color: #abde41;
  //     box-sizing: border-box;
  //   }
  //   .column-content {
  //     width: 100%;
  //     height: 70vh;
  //     padding: 20px 20px;
  //     box-sizing: border-box;
  //     .column-list {
  //       width: 100%;
  //       height: 180px;
  //       padding: 10px 0;
  //       border-bottom: 0.5px solid #abde41;
  //       display: flex;
  //       .column-img {
  //         width: 35%;
  //         height: 100%;
  //         display: flex;
  //         align-items: center;
  //         img {
  //           width: 90%;
  //           height: 90%;
  //         }
  //       }
  //       .column-title {
  //         width: 65%;
  //         height: 100%;
  //         padding: 10px 0;
  //         box-sizing: border-box;
  //         display: flex;
  //         flex-direction: column;
  //         justify-content: space-between;
  //         .p1 {
  //           font-size: 34px;
  //           color: #444444;
  //           overflow: hidden;
  //           text-overflow: ellipsis;
  //           white-space: nowrap;
  //         }
  //         .p2 {
  //           //height: 60%;
  //           font-size: 30px;
  //           line-height: 150%;
  //           color: #7d7d7d;
  //           overflow: hidden;
  //           text-overflow: ellipsis;
  //           display: -webkit-box;
  //           -webkit-line-clamp: 2;
  //           -webkit-box-orient: vertical;
  //         }
  //       }
  //     }
  //   }
  // }
}
</style>
